
<template>
  <div class='userinfo'>
    <div class="userinfo-top">
        <p style="margin-left: 20px;">个人中心</p>
        <p class="bgtext" style="font-weight: bolder;">Personal center</p>
    </div>
    <div class="userinfo-connet">
      <div class="userinfo-connet-left">
        <div class="userinfo-connet-left-list" v-for="(item,index) in menu" :key="index" :class="{ activated : activatedmenu == index }" @click="choose(index)">
          <div class="userinfo-connet-left-list-img">
            <img :src="item.activated_icon" style="width: 18px; height:20px;" v-show=" activatedmenu == index ">
            <img :src="item.icon" style="width: 18px; height:20px;" v-show=" activatedmenu !== index">
          </div>
          <div class="userinfo-connet-left-list-text">
            <p>{{item.title}}</p>
          </div>
        </div>
      </div>
      <div class="userinfo-connet-right" v-if="activatedmenu == 4">
          <div class="userinfo-connet-right-top">
            <div class="userinfo-connet-right-top-left">
              <div class="userinfo-crtl-img">
                <img src="../assets/login/logo.png" style="width:48px;height:48px;">
              </div>
              <div class="user-crtl-text">
                <p>HI!昵称！</p>
              </div>
            </div>
            <div class="userinfo-connet-right-top-right">
              <div class="userinfo-crtr-part">
                  <img src="../assets/login/tuichu.png" style="width:24px; height:24px;margin-right: 10px;">
                  <p>退出登录</p>
              </div>
            </div>
          </div>
          <div class="userinfo-connet-right-connet">
            <div class="userinfo-crc-list" v-for="(item,index) in list" :key="index">
              <div class="userinfo-crc-list-text1">
                <p>{{item.number}}</p>
              </div>
              <div class="userinfo-crc-list-text2">
                <p>{{item.title}}</p>
              </div>
              
            </div>
          </div>
      </div>
      <div class="userinfo-connet-right"  v-if="activatedmenu == 0">
        <div class="userinfo-connet-right1-top">
          <div class="ucr1t-tabar">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="全部订单" name="0"></el-tab-pane>
              <el-tab-pane label="申请中" name="1"></el-tab-pane>
              <el-tab-pane label="审核中" name="2"></el-tab-pane>
              <el-tab-pane label="代发货" name="3"></el-tab-pane>
              <el-tab-pane label="租赁中" name="4"></el-tab-pane>
              <el-tab-pane label="已完成" name="5"></el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="ucr1-connet">
          <div class="ucr1-connet-part">

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';


export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
    data() {
    //这里存放数据
      return {
        activatedmenu:0,
        activeName:0,
        list:[
          {
            title:'申请中',
            number:0,
          },
          {
            title:'申请中',
            number:0,
          },
          {
            title:'待审核',
            number:1,
          },
          {
            title:'待收货',
            number:0,
          },
          {
            title:'租用中',
            number:1,
          },
          {
            title:'全部订单',
            number:2,
          },
        ],
        menu:[
          {
            title:'首页',
            icon:require("../assets/userinfo/home.png"),
            activated_icon: require("../assets/userinfo/ac_home.png") 
          },
          {
            title:'订单中心',
            icon:require("../assets/userinfo/order.png"),
            activated_icon: require("../assets/userinfo/ac_order.png") 
          },
          {
            title:'个人中心',
            icon:require("../assets/userinfo/user.png"),
            activated_icon: require("../assets/userinfo/ac_user.png") 
          },
          {
            title:'修改密码',
            icon:require("../assets/userinfo/mima.png"),
            activated_icon: require("../assets/userinfo/ac_mima.png") 
          },
          {
            title:'收获地址管理',
            icon:require("../assets/userinfo/addres.png"),
            activated_icon: require("../assets/userinfo/ac_addres.png") 
          },
        ]
      };
    },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    choose(index){
      this.activatedmenu = index
    },
    handleClick(tab, event) {
        console.log(tab, event);
      }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style>
  p{
    margin: 0;
    padding: 0;
    border: 0;
  }
  .userinfo{
    width: 84%;
    height: 400px;
    background-color: white;
    border-radius: 12px;
    margin:0 auto 0 auto;
  }
  .userinfo-top{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: red;
    font-size: 22px;
    font-weight: 700;
    border-bottom: solid 2px #f7f7f7;
  }
  .activated{
    color: white;
    background-color: red;
  }
  .bgtext{
    
    font-size: 20px;
    color: #7f7f7f;
    /* font-family: 'Courier New', Courier, monospace; */
    position: relative;
    top: 15px;
    left: -20px;
  }
  .userinfo-connet{
    width: 100%;
    height: calc( 100% - 60px );
    /* background-color: aqua; */
    display: flex;
    justify-content: space-between;
  }
  .userinfo-connet-left{
    width: 20%;
    height: 100%;
    border-right: #f7f7f7 solid 2px;
    /* background-color: antiquewhite; */
  }
  .userinfo-connet-left-list{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    cursor:pointer;
  }
  .userinfo-connet-left-list-img{
    width: 40px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .userinfo-connet-left-list-text{
    width: calc( 100% - 40px );
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
  }
  .userinfo-connet-right{
    width: 80%;
    height: 100%;
    /* background-color: aqua; */
  }
  .userinfo-connet-right-top{
    width: 100%;
    height: 72px;
    border-bottom: #f7f7f7 solid 2px;
    display: flex;
    justify-content: space-between;
  }
  .userinfo-connet-right-top-left{
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    margin-left: 10%;
  }
  .userinfo-crtl-img{
    width: 72px;
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .user-crtl-text{
    width: calc( 100% - 72px );
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 18px;
  }
  .userinfo-connet-right-top-right{
    width: 40%;
    height: 100%;
    margin-right: 10%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .userinfo-crtr-part{
    width: 80%;
    height: 80%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 14px;
  }
  .userinfo-connet-right-connet{
    width: 100%;
    height: 82px;
    display: flex;
    justify-content: space-around;
    border-bottom: #f7f7f7 solid 2px;
    cursor: default;
    
  }
  .userinfo-crc-list{
    width: 16%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .userinfo-crc-list-text1{
    width: 100%;
    height: 60%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-weight: bolder;
    font-size:36px;
    color: red;
  }
  .userinfo-crc-list-text2{
    width: 100%;
    height: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:14px;
    color: black;
    font-weight: bold;
  }
  .userinfo-connet-right1-top{
    width: 100%;
    height: 40px;
    /* background-color: aqua; */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .ucr1t-tabar{
    width:70%;
    height: 100%;
    background-color: white;
  }
  .el-tabs__item.is-active{
    color: red !important;
  }
  .el-tabs__active-bar{
    background-color: red !important;
  }
  .el-tabs__item:hover{
    color: red !important;
  }
  .el-tabs__nav-prev {
  font-size: 19px !important;
  left: -5px !important;
  }
  .el-tabs__nav-wrap::after{
    background-color: transparent !important;
  }
  .ucr1-connet{
    width: 100%;
    height: calc( 100% - 40px );
    background-color: aquamarine;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .el-tabs__nav-next{
    font-size: 19px !important;
    right: -5px !important;
  }
  .ucr1-connet-part{
    width: 88%;
    height: 60%;
    background-color: bisque;
    margin-top: 10px;
  }
</style>